<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot-举例</title>
</head>
<body>

<select>
    <option value="1">北京</option>
    <option value="2">天津</option>
</select>
<div id="app">
     <select3>
         <option3 v-for="city in cities" :item="city"></option3>
    </select3>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script type="text/x-template" id="slt">
    <select class="slt">
        <slot></slot>
    </select>
</script>
<script type="text/x-template" id="opt">
    <option class="opt" :value="item.id">
           {{item.name}}
    </option>
</script>
<script>
    var select3 = {
        props: ['items'],
        template: '#slt'

    }

    var option3 = {
        props:['item'],
        template:'#opt'
    }

    var cities = [
        {
            id: 1,
            name: '天津'
        }, {
            id: 2,
            name: '北京'
        }]

    new Vue({
        el: '#app',
        components: {
            select3,
            option3
        },
        data: {
            cities: []
        }, mounted: function () {
            this.cities = cities;
        }
    })

</script>

</html>